﻿@page "/heatmap-chart/calendar-heatmap"

@using Syncfusion.Blazor.HeatMap
@using SFHeatMap = Syncfusion.Blazor.HeatMap
@using sf_blazor_heatmapdata
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample visualizes the summary of user activities in GitLab account such as merge requests, push events and comments across 52 weeks in a year.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to display a Calendar data using Heatmap. You can make the axis labels to display at specific time intervals along the datetime axis using the <code>ShowLabelOn</code> property in both axis directives.&nbsp;</p>
    <p>Tooltip is enabled in this example. To see the Tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-md-12">
            <SfHeatMap DataSource="@DataSource" Height="300px">
                <HeatMapTitleSettings Text="Annual Summary of User Activities in GitLab">
                    <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal"></HeatMapTitleTextStyle>
                </HeatMapTitleSettings>
                <HeatMapXAxis OpposedPosition="true"
                              Minimum="@XMinimum"
                              Maximum="@XMaximum"
                              IntervalType="@SFHeatMap.IntervalType.Days"
                              ValueType="@SFHeatMap.ValueType.DateTime"
                              LabelFormat="MMM"
                              ShowLabelOn="@SFHeatMap.LabelType.Months"
                              Increment="7"
                              LabelIntersectAction="@SFHeatMap.LabelIntersectAction.Rotate45">
                </HeatMapXAxis>
                <HeatMapYAxis Labels="@YLabels" IsInversed="true"></HeatMapYAxis>
                <HeatMapPaletteSettings Type="@SFHeatMap.PaletteType.Fixed" EmptyPointColor="white">
                    <HeatMapPalettes>
                        <HeatMapPalette Value="0" Color="rgb(238,238,238)" Label="No contributions"></HeatMapPalette>
                        <HeatMapPalette Value="1" Color="rgb(172, 213, 242)" Label="1-15 contributions"></HeatMapPalette>
                        <HeatMapPalette Value="16" Color="rgb(127, 168, 201)" Label="16-31 contributions"></HeatMapPalette>
                        <HeatMapPalette Value="32" Color="rgb(82, 123, 160)" Label="31-49 contributions"></HeatMapPalette>
                        <HeatMapPalette Value="50" Color="rgb(37, 78, 119)" Label="50+ contributions"></HeatMapPalette>
                    </HeatMapPalettes>
                </HeatMapPaletteSettings>
                <HeatMapCellSettings ShowLabel="false">
                    <HeatMapCellBorder Color = "White" ></HeatMapCellBorder>
                </HeatMapCellSettings>
                <HeatMapLegendSettings Visible="false">
                </HeatMapLegendSettings>
            </SfHeatMap>
        </div>
    </div>
</div>

@code{
    string[] YLabels = new string[] { "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
    DateTime XMinimum = new DateTime(2017, 6, 23);
    DateTime XMaximum = new DateTime(2018, 6, 30);
    int?[,] DataSource = HeatMapData.GetCalendarData();
}
